<template>
	  <li>
	    <label>
				<!-- 这里不是之前讲的动态样式控制，而是如何让vue动态拥有某个属性。
				     样式说的是class，这里说的是标签里面属性的事。
						 :checked ="false"的意思：想给input指定checked属性，后面如果是true，
						 input就拥有checked属性，否则没有这个属性；
				 -->
				 <!-- 这个勾选和取消勾选还可以使用@change方法，如下：
				 <input type="checkbox" :checked ="todo.done" @change="handlerCheck(todo.id)"/>
				 -->
				 <!-- 
				 除了通过props,将勾选或取消勾选的todo id，从MyItem中传到MyList，再传到App中，
				 还可以通过如下方法：通过双向绑定（但是不太推荐，因为有点违反原则，因为修改了props）：
				 <input type="checkbox" :checked="todo.done" v-model="todo.done"/>
				 -->
	     <input type="checkbox" :checked ="todo.done" @click="handlerCheck(todo.id)"/>
				
	      <span>{{this.todo.title}}</span>
	    </label>
			<!-- style="display:none" 隐藏这个button -->
	    <button class="btn btn-danger" @click="handlerDelete(todo.id)">删除</button>
	  </li>	
</template>

<script>
	export default{
		name:"MyItem",
		props:['todo',"checkTodo","deleteTodo"],
		methods:{
			handlerCheck(id){
				console.log("id = ",id);
				this.checkTodo(id)
			},
			handlerDelete(id){
				if(confirm(`确定删除“${this.todo.title}”？`)){
					this.deleteTodo(id)
					console.log(id);
				}
			}
		},
		//使用生命周期钩子打印接受的todo
		mounted(){
			console.log(this.todo);
		}
	}
</script>

<style scoped>

	/*item*/
	li {
	  list-style: none;
	  height: 36px;
	  line-height: 36px;
	  padding: 0 5px;
	  border-bottom: 1px solid #ddd;
	}
	
	li label {
	  float: left;
	  cursor: pointer;
	}
	
	li label li input {
	  vertical-align: middle;
	  margin-right: 6px;
	  position: relative;
	  top: -1px;
	}
	
	li button {
	  float: right;
	  display: none;
	  margin-top: 3px;
	}
	
	li:before {
	  content: initial;
	}
	
	li:last-child {
	  border-bottom: none;
	}
	
	li:hover{
		background-color: #ddd;
	}
	
	li:hover button{
		display: block;
	}
	

</style>